import './index.css'
import '@/page/nav-side/index.js'
import {addClass,hasClass,classSiblings,getData} from '@/util/dom/index.js'
import addressListText from './address-list-template.js'
import RenderTemplate from '@/util/hogan/index.js'
import orderProductListText from './order-product-list.js'
import cities from './template/cities.js'
import {orderService} from '@/service/order-service.js'
import addressHandler from './addres-handler.js'
import addressService from '@/service/address-service.js'
let orderConfirm = {
    data : {
        selectedAddress : null,
        simulateData : {
            list : [
                {
                    isActive : true,
                    id : 10000,
                    receiverCity : 'dadi city',
                    receiverProvince : 'huaxia province',
                    receiverName : 'zhangfang',
                    receiverAddress : 'dalou xiang cicun jie 306 hao',
                    receiverPhone : '123456789'
                },
                {
                    isActive : false,
                    id : 10001,
                    receiverCity : 'dadi city',
                    receiverProvince : 'huaxia province',
                    receiverName : 'zhangfang',
                    receiverAddress : 'dalou xiang cicun jie 306 hao',
                    receiverPhone : '123456789'
                }
            ]
        } 
    },
    init : function () {
        
        this.loadAddressList()
        this.loadProductList()
        
        // this.bindEvent()
    },

    bindEvent : {
        addressListEvent : function(){
            let addressElements = document.getElementsByClassName("address-item")
            for(let i = 0; i<addressElements.length;i++){
                // BindEvent on address select
                addressElements[i].addEventListener('click',() =>{
                    addClass(addressElements[i],'active')
                    let result = classSiblings(addressElements[i],'address-item')
                    for(let i = 0;i < result.length; i++){
                        if(hasClass(result[i],'active')){
                            result[i].classList.remove('active')
                        }
                    }
                    orderConfirm.data.selectedAddress = getData(addressElements[i],'id')
                })
            }
        },
        addAddressEvent : function(){
            let ele = document.getElementsByClassName('address-add')[0]
            ele.addEventListener('click',() =>{
                addressHandler.show({
                    update:false,
                    onChange : () =>{
                        this.loadAddressList()
                    }
                })
            })
        },
        updateAddressEvent : function(){
            let ele = document.getElementsByClassName('address-update')
            let elesArray = [...ele]
            elesArray.forEach((elements)=>{
                elements.addEventListener('click',() => {
                    let shipId = getData(elements.parentElement.parentElement,'id')
                    addressService.getAddress(shipId,(res) => {
                        addressHandler.show({
                            data : res.data,
                            update:true,
                            onChange : () =>{
                                this.loadAddressList()
                            }
                        })
                    },(errMsg) => {
                        console.log(errMsg)
                    })
                    
                })
            })
        },
        deleteAddressEvent : function(){
            //address-delete
            let ele = document.getElementsByClassName('address-delete')
            let elesArray = [...ele]
            elesArray.forEach((elements)=>{
                elements.addEventListener('click',() => {
                    let shipId = getData(elements.parentElement.parentElement,'id')
                    addressService.deleteAddress(shipId,(res) => {
                        console.log('delete address success')
                    },(errMsg) => {
                        console.log(errMsg)
                    })
                    
                })
            })
        }
    },


    loadAddressList : function(){


        new RenderTemplate(addressListText,this.data.simulateData).render().then((res) => {
            document.getElementsByClassName('address-con')[0].innerHTML = res
            this.bindEvent.addressListEvent()
            this.bindEvent.addAddressEvent()
            this.bindEvent.updateAddressEvent()
            this.bindEvent.deleteAddressEvent()
        })
    },
    
    loadProductList : function(){
        orderService.getProductList((res) => {
            new RenderTemplate(orderProductListText,res).render().then((res) =>{
                document.getElementsByClassName('product-con')[0].innerHTML = res
            })
        })
    }
};
(() => {
    orderConfirm.init()
    console.log(cities.getProvinces);
})()